<template>
	<view class="materialRequisition Column">
		<view class="materialRequisition_tab">
			<view class="tabItem" :class="{'active' : index == tabItemListIndex}" @click="clickTab(index)"
				v-for="(item,index) in tabItemList" :key="index">
				{{item.name}}
			</view>
		</view>

		<view class="materialRequisition_content Row">
			<view class="productList Row" v-if="productList.length != 0">
				<view class="product Column" v-for="(item,index) in productList" :key="index" :data-id="item.id"
					@click="productDetail">
					<view class="img">
						<image class="photoSize" :src="item.coverImage" mode="aspectFill"></image>
					</view>
					<view class="content Column">
						<view class="Sales">销量 {{item.sales}}</view>
						<view class="name">{{item.name}}</view>
						<view class="money">{{item.price}}</view>
					</view>
				</view>

				<view v-if="loading" class="loadingBox Row">
					<image class="loadingImg" src="../../../static/loading.gif" mode="aspectFill"></image>加载中...
				</view>
			</view>

			<view class="null" v-else>暂无上架商品</view>
		</view>
	</view>
</template>

<script>
	import {
		postMenu,
		getMenu
	} from '@/utils/api.js';
	import {
		apiGoodslist
	} from '@/api/goods.js';

	export default {
		data() {
			return {
				loading: false,

				tabItemList: [{
					name: "设备",
					type: "device",
				}, {
					name: "会员角色",
					type: "group",
				}],
				tabItemListIndex: 0,
				type: 'device',

				productList: [],
				current_page: 1,
				last_page: 1,
			}
		},
		onLoad(option) {
			this.getGoodsList();
		},
		onShow() {
			// this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				let that = this;
				uni.$u.http.post('/user/getUserInfo').then(res => {
					if (res.data.userinfo.required_info) {
						uni.showToast({
							title: '前往业务申请~',
							icon: 'none',
							duration: 1500
						});

						setTimeout(function() {
							uni.navigateTo({
								url: '/pages/index/servicesRequired/servicesRequired'
							})
						}, 1500);
					}
				}).catch(err => {
					console.log(err)
				})
			},

			clickTab(index) {
				if (index == this.tabItemListIndex) {
					return;
				}
				this.tabItemListIndex = index;
				this.type = this.tabItemList[index].type;

				this.current_page = 1;
				this.last_page = 1;
				this.productList = [];
				this.getGoodsList();
			},

			productDetail(e) {
				let id = e.currentTarget.dataset.id
				uni.navigateTo({
					url: '/pages/index/materialRequisition/productDetail/productDetail?id=' + id
				})
			},

			getGoodsList() {
				let that = this;
				apiGoodslist({
					type: that.type,
					page: that.current_page
				}).then(res => {
					const array = res.data.data;
					array.forEach(item => {
						item.coverImage = this.BASE_URL + item.images[0];
						that.productList.push(item);
					})
					that.last_page = res.data.last_page;
					that.loading = false;
				}).catch(err => {
					that.loading = false;
				})
			}
		},
		onReachBottom() {
			let that = this;
			that.current_page++;
			if (that.current_page > that.last_page) {
				return false;
			}
			that.loading = true;
			that.getGoodsList()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.materialRequisition {
		width: 100%;

		/* 切换菜单 */
		&_tab {
			width: 100%;
			display: flex;
			background-color: #fff;
			position: fixed;
			left: 0;
			z-index: 9;

			.tabItem {
				width: 100%;
				text-align: center;
				color: #7E7E9A;
				font-size: 32rpx;
				padding: 24rpx 0;
			}

			.active {
				color: black;
				font-size: 32rpx;
				font-weight: bold;
				position: relative;
			}

			.active:after {
				content: '';
				width: 18%;
				height: 6rpx;
				border-radius: 30rpx;
				background: linear-gradient(to right, #0056FF, #cccbff);
				/* 从红色渐变到蓝色 */
				opacity: 0.7;

				position: absolute;
				left: 42%;
				bottom: 12rpx;
			}
		}


		&_content {
			width: 100%;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 42px;

			.null {
				width: 100%;
				height: 80vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.productList {
				width: 96.4%;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 20rpx;

				.product {
					width: 48.6%;
					border-radius: 10rpx;
					background-color: #fff;
					overflow: hidden;
					margin-bottom: 24rpx;
				}

				.loadingBox {
					width: 100%;
					justify-content: center;

					.loadingImg {
						width: 40rpx;
						height: 40rpx;
						margin-right: 8rpx;
					}
				}

				.img {
					width: 100%;
					height: 300rpx;
				}

				.content {
					width: 88%;
					padding: 20rpx;

					.Sales {
						color: #7E7E9A;
						width: 100%;
						display: flex;
						justify-content: flex-start;
						font-size: 26rpx;
					}

					.name {
						height: 80rpx;
						font-size: 30rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						padding: 4rpx 0;
					}

					.money {
						color: #ff3b00;
						font-size: 34rpx;
						font-weight: 550;
					}
				}
			}
		}
	}
</style>